<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
    <style>
      html,
      body {
        margin: 0;
      }
      .common-layout > .el-container {
        height: 80px;
        background-color: rgb(21, 151, 251);
      }

      .common-layout .el-aside {
        height: 200px;
        background-color: rgb(110, 190, 252);
      }

      .common-layout .el-main {
        height: 120px !important;
        background-color: rgb(213, 224, 233);
      }

      .common-layout .el-footer {
        height: 80px;
        background-color: rgb(28, 92, 145);
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-main>Main</el-main>
              <el-footer>Footer</el-footer>
            </el-container>
          </el-container>
        </el-container>
      </div>
    </div>

    <script src="../vue3.2.45.js"></script>
    <script src="../element-plus/element-plus.js"></script>
    <script>
      const app = Vue.createApp({});

      // 使用 ElementPlus 组件
      app.use(ElementPlus);
      // 挂载到 box
      app.mount("#box");
    </script>
  </body>
</html>
